<template>
  <div class="supplier-detail">
    <StoreInfo :form="infoData.info" />

    <Cate :cates="infoData.catList" :ori="ori" :goodsType="infoData.goodsType" />

    <Qualica :list="infoData.qualificationList" />

    <Address :list="infoData.shippingDetailList" />

    <Pay :monthlyFlag="infoData.monthlyFlag" @change="onPayChange" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import StoreInfo from '@/components/info/store.vue'
import Cate from '@/components/info/cate.vue'
import Qualica from '@/components/info/qualica.vue'
import Address from '@/components/info/address.vue'
import Pay from '@/components/info/pay.vue'

const route = useRoute()
const ori = route.meta.ori || ''

const supplierId = route.params.id

const loading = ref(false)
const isCate = ref(true)


const infoData = reactive({
  info: {},
  goodsType: '',
  shippingDetailList: [],
  qualificationList: [],
  catList: [],
  monthlyFlag: ''
})

const QualificationTypes = {
  BUSINESS_LICENSE: 1,
  INTERNET_CERTIFICATE: 2,
  MEDICAL_INSTITUTION_PRACTICING_LICENSE: 3,
  MEDICAL_EQUIPMENT_BUSINESS_LICENSE: 4,
  MEDICAL_DEVICE_PRODUCTION_LICENSE: 5,
  MEDICAL_DEVICE_BUSINESS_RECORD_CERTIFICATE: 6
}

const changePayStatus = async (monthlyFlag) => {
  let { err } = await api.post(`/medinstrument/boss/supplier/updateSupplierMonthly?monthlyFlag=${monthlyFlag}&supplierId=${supplierId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const loadData = async () => {
  loading.value = true
  let url = `/medinstrument/boss/supplier/getSupplierDetail?supplierId=${supplierId}`

  let { data, err } = await api.get(url)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    infoData.info = data.supplierVo

    infoData.info.supplierQualificationList.sort((a, b) => {
      const ret = QualificationTypes[a.qualificationType] > QualificationTypes[b.qualificationType]
      return ret ? 1 : -1
    })

    infoData.catList = data.supplierVo.apparatusCategoryIds
    infoData.shippingDetailList = data.supplierVo.supplierShippingDetailList
    infoData.qualificationList = data.supplierVo.supplierQualificationList
    infoData.monthlyFlag = data.supplierVo.monthlyFlag
    infoData.goodsType = data.supplierVo.goodsType
  }
}

const onPayChange = (val) => {
  changePayStatus(val)
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.supplier-detail {
  margin: 10px 15px 10px 10px;
}
</style>
